<?php
@session_start();
if (isset($_SESSION['username']) && isset($_SESSION['accInfo'])) {
    $username = $_SESSION['username'];
    $accInfo = $_SESSION['accInfo'];
    echo "Hello <b>" . $username . "</b>";
} else {
    header("location:../../index.php");
}
?>
<!DOCTYPE html>
<html>
    <head>
    
    
        <meta charset='utf-8'/>
        <style type="text/css">			
            #menu-tab ul{
                list-style-type: none;
                display: inline-block;
                width: 1000px;
            }
            #menu-tab ul li{
                display: inline-block;
                margin-left: 10px;
                width: 170px;
                float: left;
                border-right: solid 1px blue;
                cursor: pointer;
                line-height: 40px;
                text-align: center;	
                font-family: Arial, Helvetica, sans-serif;			
            }
            #menu-tab ul li:hover{
                font-weight: bold;
                color: white;
            }
            #menu-tab{
                width: 1000px;
                height: 40px;
                background-color: #b0ca34;
                border-top-left-radius: 8px;
                border-top-right-radius: 8px;
                border-bottom-left-radius: 8px;
                border-bottom-right-radius: 8px;
                -webkit-border-radius: 8px;
                -moz-border-radius: 8px;                                
            }
            .active{
                background-color: #FF6600;
            }
            .content{
                width: 1000px;
                height: 500px;
                border: solid 1px red;
            }
            #Configuration, #Download, #Favourite, #Logout{
                display: none;
            }
        </style>
        <link rel="stylesheet" type="text/css" href="../../assets/css/style.css"/>
        <title>.::Member::.</title>
        <script src="../../assets/jquery-1.10.2.js" type="text/javascript" language="javascript"></script>
        
        
        <script type="text/javascript" language="javascript">
            $("document").ready(function(e) {
                $(".tab").click(function(e) {
                    $(".active").removeClass("active"); // the first remove active class										
                    $(this).addClass("active");
                    $(".content").hide();
                    var title = $(this).attr("title");
                    $("#" + title).show();
                });


                //process ajax get user info						
            });
        </script>
    </head>
    <body>
        <div id="wrapper">


            <div id="menu-tab">
                <ul>
                    <li title="Account-Info" class="tab active">Account Information</li>
                    <li title="Configuration" class="tab">Configuration</li>
                    <li title="Download" class="tab">List Download</li>
                    <li title="Favourite" class="tab">Favourite</li>
                    <li title="logout" class="tab"><a href="../logout.php">Logout</a></li>
                </ul>
            </div>

            <div class="content" id="Account-Info">

                <div id="accInfo">
                    <p>Account Information</p>                	
                    <input type="button" value="Show profile" class="btn-info" id="btnShowInfo" style="cursor:pointer"/>
                    <div id="display">
                        <?php
                        echo "<table border='1'";
                        foreach ($accInfo as $key => $value) {
                            echo "<tr>";
                                echo "<td>" . $value['user_address'] . "</td>";
                            echo "<tr>";
                            echo "<tr>";
                                echo "<td>" . $value['user_role'] . "</td>";
                            echo "</tr>";
                        }
                        echo "</table>";
                        ?>

                    </div>
                </div>
            </div>


            <div class="content" id="Configuration">
                Configuration
            </div>


            <div class="content" id="Download">
                Download
            </div>


            <div class="content" id="Favourite">
                Favourite
            </div>

            <div class="content" id="Logout">
                Logout
            </div>
            
            <div id="footer">
            
                <?php include("../../footer.php");?>
            
            </div>
        </div>
    </body>
</html>